<script>
import NavbarToggler from "../components/NavbarToggleButton.vue";
import FloatBtn from "../components/FloatBtn.vue";
import SideRecommend from "../components/SideRecommend.vue";
import VideoTree from "../components/VideoTree.vue";
import Progress from "../components/Progress.vue";
import javaListData4DX from "../assets/json/JavaListData4DX.json";
import RingGauge from "../components/RingGauge.vue";
import {resourceURL} from "../axiosConfig";

export default {
  props: {
    target: {
      type: [String, Number],
      default: '',
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    RingGauge,
    Progress,
    SideRecommend,
    FloatBtn,
    NavbarToggler,
    VideoTree
  },
  methods: {
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    },
    handleUrlClicked(url) {
      // 处理接收到的 URL 参数
      this.clickedUrl = url;
      // 更新动态key
      this.dynamicKey = Math.random(10000);
      console.log("点击的url: " + this.clickedUrl);
    },
    goBack() {
      console.log('go back');
      window.history.back();
    },
  },
  mounted() {
    const urlId = this.$route.params.id;
    // 现在你可以使用id来获取父组件传递的参数
    console.log("id: " + urlId);

    const videoPlayerHeight = this.$refs.videoPlayer.offsetHeight;
    this.videoListHeight = videoPlayerHeight;
  },
  data() {
    return {
      variable: '',
      urlId: this.$route.params.id - 1, // 保存urlId为组件数据
      clickedUrl: resourceURL+'/video/2/2.3.2常量与变量 - 4.变量.mp4', // 保存点击视频节点的url
      dynamicKey: '', // 视频播放器key
      videoListHeight: 0,// 视频列表容器高度
      javaListData: javaListData4DX,

      videoListData: [
        {
          id: 1,
          title: "2.3.1Java的标识符 - 标识符和保留字.pptx"
        },
        {
          id: 2,
          title: "2.3.2Java的数据类型 - 2.引用数据类型.mp4"
        },
        {
          id: 3,
          title: "2.3.2常量与变量 - 3.常量.mp4"
        },
        {
          id: 4,
          title: "2.3.1Java的标识符 - 3.保留字.mp4"
        },
        {
          id: 5,
          title: "2.3.2常量与变量 - 常量和变量.pptx"
        },
      ]
    }
  }
};

</script>

<template>
  <div class="col-10" style="margin: auto;">
    <el-page-header @back="goBack" content="返回详细课程">
    </el-page-header>
    <div>
      <float-btn />
      <div class="row">
        <div class="col-12">
          <card>
            <div class="row">
              <span class="deco"></span>
              <h2 class="clearMargin">2.3.2常量与变量 - 4.变量.mp4</h2>
            </div>
          </card>
        </div>
        <div class="col-12" ref="parentContainer" style="display: flex;">
          <card style="padding: 30px 1rem;
    flex: 1 1 0%;
    height: 75vh;">
            <div class="row" style="height: 100%;">
              <div class="col-md-9" style="display: flex; flex-direction: column;">
                <div class="video-container">
                  <video ref="videoPlayer" :key="dynamicKey" controls autoplay="autoplay" width="100%" height="100%"
                    style="">
                    <source :src="clickedUrl" type="video/mp4">
                  </video>
                </div>
              </div>
              <div class="col-md-3 " ref="videoListContainer"
                style="max-height: 100%; overflow: auto;scrollbar-width: thin;margin-top: 25px;">
                <div>
                  <h4>当前知识点掌握程度</h4>
                  <Progress :progress="70" :showInfo="true" :strokeWidth="10" :title="null" :width="100"/>
                </div>
                <div style="height: auto;">
                  <h4>相关知识点</h4>
                  <img style="width: 290px;height: 170px;" src="../assets/img/ciyun.jpg" alt="">
                </div>
                <div>
                  <h4>本节学习次数</h4>
                  <h3 class="TDA" style="text-align: center;margin: 0;">4次</h3>
                  <h5 style="text-align: center">击败了全校<a style="color:#2e63f3; ">44%</a>的学生</h5>
                </div>
                <div class="center">
                  <h4>当前课程TDA</h4>
                  <h3 class="TDA" style="text-align: center;margin: 0;">TDA / 7.6</h3>
                  <h5 style="text-align: center">击败了全校<a style="color:#2e63f3; ">44%</a>的学生</h5>
                </div>
              </div>
            </div>
          </card>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
ul {
  padding-left: 1rem;
}

#list {
  list-style: none;
  line-height: 2rem;
  width: 399px;

  :hover {
    color: #2a80cc;
  }

  :focus {
    color: #219df8;
  }
}

a {
  color: #1e1e24;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 62.39%;
  /* 视频宽高比 */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h4 {
  margin-top: 1.5rem;
}

.el-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 95px;
}
</style>
